﻿@using MyCompanyName.AbpZeroTemplate.Localization
@using MyCompanyName.AbpZeroTemplate.Web.Navigation
@{
    ViewBag.CurrentPageName = PageNames.Frontend.Home;
}
@section Styles
{
    <link href="~/libs/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="~/libs/carousel-owl-carousel/owl-carousel/owl.carousel@(CultureHelper.IsRtl ? "-rtl" : "").css" rel="stylesheet">
}
@section Scripts
{
    <script src="~/libs/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
    <script src="~/libs/carousel-owl-carousel/owl-carousel/owl.carousel@(CultureHelper.IsRtl ? "-rtl" : "").js" type="text/javascript"></script><!-- slider for products -->
    <script type="text/javascript">
        $(function () {
            Layout.initOWL();
        });
    </script>
}
<!-- BEGIN SERVICE BOX -->
<div class="row service-box margin-bottom-40" style="margin-bottom:100px !important;">
    <div class="topImg">
        @*<img src="~/Common/Images/llcx.jpg" class="img-responsive" style="width:100%;"/>*@
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                @*<li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>*@
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="~/Common/FoStyle/Images/banner1.jpg" alt="First slide" class="responsive">
                </div>
                <div class="item">
                    <img src="~/Common/FoStyle/Images/banner2.jpg" alt="Second slide" class="responsive">
                </div>
                @*<div class="item">
                        <img src="~/Common/FoStyle/Images/banner3.jpg" alt="Third slide" width="100%">
                    </div>
                    <div class="item">
                        <img src="~/Common/FoStyle/Images/banner4.jpg" alt="Third slide" width="100%">
                    </div>*@
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <div class="pre-header">
        <div class="row">
            <div class="col-md-12 col-sm-12 topSheet">
                <span>流量查询</span>
            </div>
        </div>
    </div>
    <div style="padding-left:250px;padding-right:250px;">
        <div style="overflow:hidden;">
            <div style="width:80%;float:left;">
                <div class="form-group">
                    <input class="form-control input-medium" style="width:100% !important;" type="text" placeholder="请输入流量卡号" id="input1">
                </div>
            </div>
            <div style="float:right;padding-top:2px;" class="queryButton">
                <a>流量查询</a>
            </div>
        </div>
        <div style="padding-top:17px;">
            <span class="text-danger">注意:请实名激活、绑定个人信息，以便日后办理其他业务，否则丢失或其他原因不能正常使用，概不负责</span>
        </div>
        <div>
            <div class="" padding-top-10" id="buttonQuery">
                <div class="">
                    <div>
                        <span style="color:#9c9c9c;">温馨提示：</span>
                    </div>
                    <ul class="" style="list-style:none;padding-left:0 !important;">
                        <li class="listItem" style="margin-bottom:2px;">一、流量上网卡，建议登陆系统进行实名激活，以便于日后办理挂失、补卡等业务。</li>
                        <li class="listItem" style="margin-bottom:2px;">二、更换设备卡会自动锁定！充值一次流量会自动激活。</li>
                        <li class="listItem" style="margin-bottom:2px;">三、卡激活后30天未使用，卡会自动锁定，充值一次自动激活。</li>
                        <li class="listItem">四、充值成功后一般为半年有效期，特大套餐可以交持到一年以上，详情各地咨询经销商。</li>
                    </ul>
                </div>
            </div>
            <div id="buttonQueryContent" style="display:none;">
                <div>
                    <ul class="" style="list-style:none;padding-left:0 !important;">
                        <li class="queryContent"><span>真实姓名：<span id="spName"></span></span></li>
                        <li class="queryContent"><span>身&nbsp;&nbsp;份&nbsp;&nbsp;证：<span id="spCard"></span></span></li>
                        <li class="queryContent"><span>备&nbsp;&nbsp;卡&nbsp;&nbsp;号：<span id="spCardno"></span></span></li>
                        <li class="queryContent"><span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：<span id="spTel"></span></span></li>
                        <li class="queryContent"><span>当前套餐：<span style="color:#DF1722;" id="spTc"></span></span></li>
                        <li class="queryContent"><span>剩余流量：<span style="color:#DF1722;" id="spSy"></span></span></li>
                        <li class="queryContent"><span>当前状态：<span style="color:#DF1722;" id="spState"></span></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END SERVICE BOX -->
